<template>
  <div class="boyi-job-container">
    <div v-loading="listLoading">
      <customer ref="customerRef" :customer="customer" />
      <el-tabs
        v-model="activeName"
        style="height: 400px"
        class="demo-tabs"
        @tab-change="handleTabChange"
      >
        <el-tab-pane
          v-for="(job, index) in customer.job_list"
          :key="index"
          :label="job.name"
        >
          <job-info
            :ref="'job-info-' + index"
            :job="job"
            @handle-job="handleJob"
            @fetch-job="getJobInfoData(job)"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import { getDetail } from '@/api/boyiJob'
  import { useRoute } from 'vue-router'
  import JobInfo from './components/JobInfo'
  import Customer from '@/views/boyi/customer/components/Customer'
  export default defineComponent({
    name: 'JobDetail',
    components: { JobInfo, Customer },
    setup() {
      // const $baseConfirm = inject('$baseConfirm')
      // const $baseMessage = inject('$baseMessage')
      const route = useRoute()
      const state = reactive({
        jobHandle: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        currentJob: {},
        activeName: '1',
        customer: {
          job_list: [],
        },
      })

      const handleJob = () => {
        emit('fetch-data')
        state.dialogFormVisible = false
      }

      const showEdit = (customer, job) => {
        state.job = Object.assign({}, job)
        state.customer = Object.assign({}, customer)
        customer.job_list.forEach((item, index) => {
          if (item.id === job.id) {
            state.activeName = `${index}`
          }
        })
      }

      onMounted(() => {
        fetchData()
      })
      const fetchData = async () => {
        state.listLoading = true
        console.log(route)
        const { data } = await getDetail({ job_id: route.params.job_id })
        data.customer.job_list = [data]
        showEdit(data.customer, data)
        state.listLoading = false
      }

      return {
        ...toRefs(state),
        handleJob,
        showEdit,
        fetchData,
      }
    },
  })
</script>
